<template>
    <div class="demo">
        <h1>{{msg}}</h1>
        <h2>学校名称: {{name}}</h2>
        <h2>地址: {{address}}</h2>
        <button @click="sendName">SendName</button>  <!--  -->
        <button @click="unbind">解绑事件</button>  <!--  -->
        <button @click="death">销毁组件</button>  <!--  -->
    </div>
</template>

<script>

    export default {
        name: 'SchoolComponent',
        data() {
            return {
                msg: "学校信息",
                name: '清华大学', //固定数据, 支持用标签的地方传参
                address: '不二家'
            }
        },
        methods: {
            sendName() {
                this.$emit('ccc', this.name, 666, 888, 999)//触发自定义事件, 传递参数
            },
            unbind() {
                this.$off('ccc') //解绑事件, 解绑一个自定义事件
                // this.$off(['ccc','ddd']) //解绑多个自定义事件, 
                // this.$off() //解绑所有自定义事件
            },
            death() {
                this.$destroy() //销毁组件, 所有当前组件的事件都会被解绑, 包含子组件
            }
        }
    }    
</script>

<!-- 不同组件中的样式名重名会发生冲突, 后引入的会覆盖先引入的插件的同名样式, 可以通过scope限制作用范围, 默认全局, lang 声明css语言 支持less 等写法 -->
<style scoped>
    .demo {
        background-color: #f00;
    }
</style>